<!DOCTYPE html>
<html>
<head>
<title>Sample: Simple Container</title>
<!-- default container look and feel -->
<link rel="stylesheet" href="StyleSheets/gadgets.css">
<link rel="stylesheet" href="StyleSheets/container.css">
<script type="text/javascript" src="Scripts/util.js"></script>
<script type="text/javascript" src="Scripts/container/json.js"></script>
<script type="text/javascript" src="Scripts/container/ifpc.js"></script>
<script type="text/javascript" src="Scripts/container/cookies.js"></script>
<script type="text/javascript" src="Scripts/container/gadgets.js"></script>

<script type="text/javascript">
var specUrl0 = 'http://abowman.googlepages.com/spider.xml';
var specUrl1 = 'http://www.labpixies.com/campaigns/todo/todo.xml';
var specUrl2 = 'http://www.google.com/ig/modules/mapsearch.xml';
var specUrl3 = 'http://www.google.com/ig/modules/mapsearch.xml';

// This container lays out and renders gadgets itself.

function renderGadgets() {
  var gadget0 = gadgets.container.createGadget({specUrl: specUrl0});
  var gadget1 = gadgets.container.createGadget({specUrl: specUrl1});
  var gadget2 = gadgets.container.createGadget({specUrl: specUrl2});
  var gadget3 = gadgets.container.createGadget({specUrl: specUrl3});

  gadgets.container.addGadget(gadget0);
  gadgets.container.addGadget(gadget1);
  gadgets.container.addGadget(gadget2);
  gadgets.container.addGadget(gadget3);
  gadgets.container.layoutManager =
      new gadgets.SortableLayoutManager('div.column');
  //gadgets.container.layoutManager =
  //    new gadgets.FloatLeftLayoutManager('layout-root');
  

  gadgets.container.renderGadget(gadget0);
  gadgets.container.renderGadget(gadget1);
  gadgets.container.renderGadget(gadget2);
  gadgets.container.renderGadget(gadget3);
};
</script>
</head>
<body onLoad="renderGadgets()">
  <h2>Sample: Simple Container</h2>
  <div id="sort1" class="column">
 	</div>
  <div id="sort2" class="column">
 	</div>
  <div id="sort3" class="column">
 	</div>
  
<script type="text/javascript">
$(document).ready(
	function () {
		$('a.closeEl').bind('click', toggleContent);
		$('div.column').Sortable(
			{
				accept: 'gadget',
				helperclass: 'sortHelper',
				activeclass : 'sortableactive',
				hoverclass : 'sortablehover',
				handle: 'div.gadgets-gadget-title-bar',
				tolerance: 'pointer',
				onChange : function(ser)
				{
				},
				onStart : function()
				{
					$.iAutoscroller.start(this, document.getElementsByTagName('body'));
				},
				onStop : function()
				{
					$.iAutoscroller.stop();
				}
			}
		);
	}
);
var toggleContent = function(e)
{
	var targetContent = $('div.itemContent', this.parentNode.parentNode);
	if (targetContent.css('display') == 'none') {
		targetContent.slideDown(300);
		$(this).html('[-]');
	} else {
		targetContent.slideUp(300);
		$(this).html('[+]');
	}
	return false;
};
</script>

</body>
</html>
